<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import {
  Menu as IconMenu,
  Message,
  Setting,
  User,
  Bell,
  Document,
  Grid,
  Connection
} from '@element-plus/icons-vue'
import {
  ElTable,
  ElTableColumn,
  ElButton,
  ElButtonGroup,
  ElTag,
  ElProgress
} from 'element-plus'

const isCollapse = ref(false)
const activeMenu = ref('1')

// 面包屑数据
const breadcrumbItems = [
  { text: '首页', link: '/' },
  { text: '仪表盘', link: '/dashboard' }
]

// 项目数据
const tableData = [
  {
    id: '1',
    name: '电商平台重构',
    leader: '张三',
    progress: 80,
    status: 'success',
    priority: 'high',
    deadline: '2024-03-30'
  },
  {
    id: '2',
    name: '移动端APP开发',
    leader: '李四',
    progress: 45,
    status: 'warning',
    priority: 'medium',
    deadline: '2024-04-15'
  },
  {
    id: '3',
    name: '数据分析平台',
    leader: '王五',
    progress: 30,
    status: '',
    priority: 'low',
    deadline: '2024-05-01'
  }
]

// 统计数据
const statistics = [
  { label: '总项目数', value: 12, icon: Document, color: '#409EFF' },
  { label: '进行中', value: 5, icon: Connection, color: '#67C23A' },
  { label: '待处理', value: 3, icon: Grid, color: '#E6A23C' },
  { label: '已完成', value: 4, icon: Setting, color: '#909399' }
]

// 响应式处理
const isMobile = ref(window.innerWidth <= 768)

const handleResize = () => {
  isMobile.value = window.innerWidth <= 768
  if (isMobile.value) {
    isCollapse.value = true
  }
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  handleResize()
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <!-- 添加响应式容器 -->
  <div class="responsive-container">
    <el-container class="app-container">
      <!-- 侧边栏 -->
      <el-aside 
        :width="isCollapse ? '64px' : '200px'" 
        class="aside-container"
      >
        <el-menu
          :collapse="isCollapse"
          class="menu-container"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-active="activeMenu"
        >
          <div class="flex justify-center py-4">
            <el-button 
              :icon="IconMenu" 
              @click="isCollapse = !isCollapse"
              circle
            />
          </div>
          
          <el-menu-item index="1">
            <el-icon><Document /></el-icon>
            <template #title>仪表盘</template>
          </el-menu-item>

          <el-menu-item index="2">
            <el-icon><Grid /></el-icon>
            <template #title>项目管理</template>
          </el-menu-item>

          <el-menu-item index="3">
            <el-icon><Connection /></el-icon>
            <template #title>团队协作</template>
          </el-menu-item>

          <el-menu-item index="4">
            <el-icon><Setting /></el-icon>
            <template #title>系统设置</template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container class="main-wrapper">
        <!-- 顶部导航 -->
        <el-header class="header-container">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in breadcrumbItems" :key="item.text" :to="item.link">
              {{ item.text }}
            </el-breadcrumb-item>
          </el-breadcrumb>

          <div class="flex items-center space-x-4">
            <el-badge :value="3" class="item">
              <el-button :icon="Bell" circle />
            </el-badge>
            <el-dropdown>
              <el-avatar :icon="User" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人信息</el-dropdown-item>
                  <el-dropdown-item>修改密码</el-dropdown-item>
                  <el-dropdown-item divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主要内容区 -->
        <el-main class="main-container">
          <!-- 统计卡片 -->
          <el-row :gutter="20" class="mb-6">
            <el-col :span="6" v-for="item in statistics" :key="item.label">
              <el-card shadow="hover" class="flex items-center">
                <el-icon :size="40" :color="item.color">
                  <component :is="item.icon" />
                </el-icon>
                <div class="ml-4">
                  <div class="text-2xl font-bold">{{ item.value }}</div>
                  <div class="text-gray-500">{{ item.label }}</div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 项目列表 -->
          <el-card shadow="never">
            <template #header>
              <div class="flex justify-between items-center">
                <span class="font-bold">项目列表</span>
                <el-button type="primary">新建项目</el-button>
              </div>
            </template>

            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="项目名称" />
              <el-table-column prop="leader" label="负责人" width="120" />
              <el-table-column prop="progress" label="进度" width="180">
                <template #default="scope">
                  <el-progress 
                    :percentage="scope.row.progress"
                    :status="scope.row.status || ''"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="priority" label="优先级" width="120">
                <template #default="scope">
                  <el-tag :type="scope.row.priority === 'high' ? 'danger' : 
                                scope.row.priority === 'medium' ? 'warning' : 'info'">
                    {{ scope.row.priority }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="deadline" label="截止日期" width="120" />
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-button-group>
                    <el-button type="primary" link>编辑</el-button>
                    <el-button type="danger" link>删除</el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
/* 响应式布局样式 */
.responsive-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.app-container {
  width: 100%;
  height: 100%;
}

.aside-container {
  height: 100vh;
  transition: width 0.3s;
  overflow: hidden;
  background-color: #545c64;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
}

.menu-container {
  height: 100%;
  border-right: none;
}

.main-wrapper {
  min-height: 100vh;
  margin-left: v-bind('isCollapse ? "64px" : "200px"');
  transition: margin-left 0.3s;
}

.header-container {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: white;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
}

.main-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 响应式断点 */
@media screen and (max-width: 768px) {
  .aside-container {
    position: fixed;
    transform: translateX(v-bind('isCollapse ? "-200px" : "0"'));
    width: 200px !important;
  }

  .main-wrapper {
    margin-left: 0;
  }

  .header-container {
    padding: 0 10px;
  }

  /* 统计卡片在移动端单列显示 */
  :deep(.el-row) {
    margin: 0 !important;
  }

  :deep(.el-col) {
    width: 100% !important;
    margin-bottom: 10px;
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .header-container {
    background-color: #1a1a1a;
    border-bottom-color: #2c2c2c;
  }

  .main-container {
    background-color: #141414;
  }
}

/* 滚动条美化 */
.main-container::-webkit-scrollbar {
  width: 6px;
}

.main-container::-webkit-scrollbar-thumb {
  background-color: #909399;
  border-radius: 3px;
}

.main-container::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}
</style>
